"use client";

/**
 * Standalone SSO/SCIM admin route (TASK-0131 / TASK-0132).
 *
 * The spec: `apps/web/components/admin/SsoTabs.tsx` "wired into the org
 * admin Integrations tab (route works standalone)." TASK-0133 will host
 * `SsoTabs` + `ScimCard` inside the `/org/[orgId]/admin/` console (8 tabs).
 * Until then THIS standalone route exposes the SSO + SCIM surfaces on its
 * own: a minimal session-gated shell, addressed by org id.
 *
 * `/org/[orgId]/admin/integrations` → <SsoTabs orgId /> + <ScimCard orgId />
 *
 * The components are org-owner gated server-side (the API 403s a
 * non-owner), so the route simply rendering them is safe — the data layer
 * enforces authorization.
 */
import { useEffect } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { ShieldCheck } from "lucide-react";
import { useAuth } from "@/hooks/use-auth";
import { SsoTabs } from "@/components/admin/SsoTabs";
import { ScimCard } from "@/components/admin/ScimCard";

export default function SsoAdminIntegrationsPage() {
  const { orgId } = useParams<{ orgId: string }>();
  const router = useRouter();
  const { user, initializing } = useAuth();

  useEffect(() => {
    if (!initializing && !user) {
      const next = window.location.pathname + window.location.search;
      router.replace(`/login?next=${encodeURIComponent(next)}`);
    }
  }, [initializing, user, router]);

  if (initializing || !user) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-background">
        <div className="flex items-center gap-3 text-sm text-muted-foreground" role="status">
          <span className="size-4 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-foreground" />
          Loading…
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border">
        <div className="mx-auto flex max-w-3xl items-center gap-2 px-4 py-3">
          <Link href="/w/default" className="text-sm text-muted-foreground hover:text-foreground">
            ← Workspaces
          </Link>
          <span className="text-muted-foreground">/</span>
          <span className="inline-flex items-center gap-1.5 text-sm font-semibold">
            <ShieldCheck className="size-4" /> Organization admin — Integrations
          </span>
        </div>
      </header>
      <main className="mx-auto max-w-3xl space-y-8 px-4 py-6">
        {orgId ? (
          <>
            <SsoTabs orgId={orgId} />
            <ScimCard orgId={orgId} />
          </>
        ) : (
          <p className="text-sm text-muted-foreground">Missing org id.</p>
        )}
      </main>
    </div>
  );
}